// This file is part of OpenMediaVault.
//
// @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
// @author    Volker Theile <volker.theile@openmediavault.org>
// @copyright Copyright (c) 2009-2024 Volker Theile
//
// OpenMediaVault is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// OpenMediaVault is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
@use 'sass:color';
@use 'scss/defaults/colors' as dc;
@use 'scss/defaults/variables' as dv;
@use 'scss/theme';

omv-login-page {
  .background {
    background-color: dc.$omv-color-corporate-light;
    content: url('^./assets/images/harddisk_on_circuit.jpg');
    object-fit: cover;
  }

  omv-green-rain {
    font-family: theme.$omv-font-family-monospace !important;
    font-size: 14px;
  }

  .topbar {
    background-color: hsla(
      color.hue(dc.$omv-color-corporate-default),
      color.saturation(dc.$omv-color-corporate-default),
      color.lightness(dc.$omv-color-corporate-default),
      54%
    );
    backdrop-filter: blur(4px);

    .logo {
      content: url('^./assets/images/openmediavault_logo.svg');
      width: auto;
      height: auto;
    }
  }

  .content {
    omv-intuition-form-page {
      .mat-card {
        color: dc.$omv-color-white;
        backdrop-filter: blur(4px);
        background-color: dc.$omv-color-black-translucent;
        border-color: hsla(
          color.hue(dc.$omv-color-corporate-default),
          color.saturation(dc.$omv-color-corporate-default),
          color.lightness(dc.$omv-color-corporate-default),
          54%
        );
        border-style: solid;
        border-width: 1px;

        .mat-form-field {
          .mat-input-element {
            caret-color: theme.$omv-color-primary;
          }

          .mat-form-field-label,
          .mat-hint {
            color: dc.$omv-color-white;
          }

          .mat-form-field-underline {
            background-color: dc.$omv-color-white;
          }

          .mat-form-field-ripple {
            background-color: theme.$omv-color-primary;
          }

          &.mat-form-field-invalid {
            .mat-input-element {
              caret-color: theme.$omv-color-error;
            }

            .mat-form-field-label {
              color: theme.$omv-color-error;
            }

            .mat-form-field-ripple {
              background-color: theme.$omv-color-error;
            }
          }

          .mat-form-field-suffix .mat-icon,
          .mat-form-field-prefix .mat-icon {
            color: dc.$omv-color-white;
          }
        }
      }
    }
  }
}
